<template>
	<view>
		<scroll-view class="view">
			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">学历要求</text>
					<text class="sub_tip">单选</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in degreeTag">
						<u-tag v-if="params.require_degree==value" :text="value" bg-color="selected_bgcolor" border-color="#54b4f5" color="#54b4f5" size="larger" @click="degreeClick(value)" :index = "index" />
						<u-tag v-else :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" @click="degreeClick(value)" :index = "index" type="info" />
					</view>
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">薪资待遇</text>
					<text class="sub_tip">单选</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in salaryTag">
						<u-tag v-if="selected_salary==value" :text="value" bg-color="selected_bgcolor" border-color="#54b4f5" color="#54b4f5" size="larger" @click="salaryClick(index)" :index = "index" />
						<u-tag v-else :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" @click="salaryClick(index)" type="info" />
					</view>
				</view>
			</view>
			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">工作经验</text>
					<text class="sub_tip">单选</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in experienceTag">
						<u-tag v-if="params.work_period==index" :text="value" bg-color="selected_bgcolor" border-color="#54b4f5" color="#54b4f5" size="larger" @click="periordClick(index)" :index = "index" />
						<u-tag v-else :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" @click="periordClick(index)" type="info" />
					</view>
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">性别</text>
					<text class="sub_tip">单选</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in genderTag">
						<u-tag v-if="params.require_gender==index" :text="value" bg-color="selected_bgcolor" border-color="#54b4f5" color="#54b4f5" size="larger" @click="genderClick(index)" :index = "index" />
						<u-tag v-else :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" @click="genderClick(index)" type="info" />
					</view>
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">公司性质</text>
					<text class="sub_tip">单选</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in amountTag">
						<u-tag :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" type="info" />
					</view>
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">语言</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in languageTag">
						<u-tag :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" type="info" />
					</view>
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">福利待遇</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in welfareTag">
						<u-tag v-if="selected_welfare.indexOf(value)!=-1" :text="value" bg-color="selected_bgcolor" border-color="#54b4f5" color="#54b4f5" size="larger" @click="welfareClick(value)" :index = "index" />
						<u-tag v-else :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" @click="welfareClick(value)" type="info" />
					</view>
				</view>
			</view>

			<view class="divid_line_horizen"></view>
			<view class="box">
				<view>
					<text class="sub_title">年龄区间</text>
					<text class="sub_tip">单选</text>
				</view>
				<view class="tag">
					<view style="margin: 0 16rpx 32rpx 0;" v-for="(value, index) in ageTag">
						<u-tag v-if="selected_age==value" :text="value" bg-color="selected_bgcolor" border-color="#54b4f5" color="#54b4f5" size="larger" @click="ageClick(index)" :index = "index" />
						<u-tag v-else :text="value" bg-color="default_bgcolor" border-color="#eee" color="#666" size="larger" @click="ageClick(index)" type="info" />
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<view class="clear" @click="clear">
				<text style="font-size: 32rpx;color: #333333;line-height: 84rpx;">清除</text>
			</view>
			<view class="confirm" @click="confirm">
				<text style="font-size: 32rpx;color: #FFFFFF;line-height: 84rpx;">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					"require_degree":"不限",
					"lower_salary":0,
					"upper_salary":0,
					"work_period":"0",
					"require_gender":"0",
					"lower_age":0,
					"upper_age":0
				},
				default_bgcolor:"F9FAFC",
				selected_bgcolor:"#d54b4f5",
				selected_salary:"不限",
				selected_age:"不限",
				selected_amount:"不限",
				selected_language:"不限",
				selected_welfare:["不限"],
				salar_arr:[0,2000,3000,5000,8000,10000,12000,15000],
				
				degreeTag: ['不限','初中及以下','中专/技校','高中', '大专','本科','硕士及以上'],
				salaryTag: ["不限", "2k以内", "2-3k","3-5k", "5-8k", "8k-10k", "10-12k", "12-15k", "15k以上"],
				experienceTag: ["不限", "一年以内", "1-3年", "3-5年", "5-10年", "十年以上"],
				genderTag: ["不限", "男", "女"],
				amountTag: ["不限", "0-20人", "20-99人", "100-499人", "500-999人", "1000-9999人", "10000人以上"],
				languageTag: ["不限", "中文", "英文", "法语", "西班牙语", "葡萄牙语", "俄罗斯语", "阿拉伯语", "德语", "日语", "印度语"],
				welfareTag: ["不限", "五险", "公积金", "交通补贴", "加班补助", "年底双薪", "周末双休", "话补", "饭补", "房补", "工作餐", "提供宿舍"],
				ageTag: ["不限", "18-29岁", "30-49岁", "50-59岁", "60以上"]
			}
		},
		methods: {
			degreeClick(e){//e代表选中的item
				this.params.require_degree = e
				console.log(this.params);
			},
			salaryClick(e){//e代表角标
				this.selected_salary = e
				if(0==e){
					this.params.upper_salary = this.salar_arr[e];
				}else if(e == 7){
					this.params.lower_salary = this.salar_arr[e];
				}else{
					this.params.upper_salary = this.salar_arr[e];
					this.params.lower_salary = this.salar_arr[e-1];
				}
				console.log(this.params);
			},
			periordClick(e){//e代表角标
				this.params.work_period = e
			},
			genderClick(e){//e代表角标
				this.params.require_gender = e
			},
			ageClick(e){//e代表角标
				this.selected_age = this.ageTag[e]
				if(e==0){
					this.params.upper_age = 199
				}else if(e==1){
					this.params.lower_age = 18
					this.params.upper_age = 29
				}else if(e==2){
					this.params.lower_age = 30
					this.params.upper_age = 49
				}else if(e==3){
					this.params.lower_age = 50
					this.params.upper_age = 59
				}else if(e==4){
					this.params.lower_age = 60
				}
				console.log(this.params);
			},
			welfareClick(e){
				if(e=="不限"){
					this.selected_welfare = []
					this.selected_welfare.push(e)
				}else if(this.selected_welfare.indexOf(e)!=-1){
					var idx = this.selected_welfare.indexOf(e)
					this.selected_welfare.splice(idx,1)
					if(!this.selected_welfare||this.selected_welfare.length==0){
						this.selected_welfare.push("不限")
					}
				}else{
					if(this.selected_welfare.indexOf("不限")!=-1){
						var idx = this.selected_welfare.indexOf("不限")
						this.selected_welfare.splice(idx,1)
					}
					this.selected_welfare.push(e)
				}
				console.log(this.selected_welfare);
			},
			clear(e) {
				this.selected_age = "不限"
				this.selected_amount = "不限"
				this.selected_language = "不限"
				this.selected_salary = "不限"
				this.selected_welfare = ["不限"]
			},
			confirm(e) {
				this.params.welfares = this.selected_welfare.toString()
				console.log("params",this.params);
				this.$u.route({
					url: 'pages/components/empty/index',
					type:"back",
					params:this.params
				})
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.view {
		height: 100%;
		background-color: #FFFFFF;
		margin-bottom: 180rpx;

		.box {
			padding: 50rpx 40rpx 0 40rpx;
			display: flex;
			flex-direction: column;
		}

		.sub_title {
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			color: #333333;
		}

		.sub_tip {
			width: 40px;
			height: 20px;
			background: rgba(255, 152, 54, 0.1);
			border-radius: 2px;
			color: #FF9836;
			font-size: 24rpx;
			margin-left: 16rpx;
		}

		.tag {
			display: flex;
			flex-wrap: wrap; //可换行
			width: 100%;
			padding: 30rpx 0;
		}
	}

	.bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		display: flex;
		flex-direction: row;

		.clear {
			width: 220rpx;
			height: 84rpx;
			align-self: center;
			text-align: center;
			border-radius: 6px;
			border: 1px solid #E8EAEC;
			margin-left: 40rpx;
		}

		.text {
			font-size: 32rpx;
			color: #333333;
		}

		.confirm {
			width: 430rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #1698F9 0%, #4CC5FC 100%);
			border-radius: 6px;
			align-self: center;
			text-align: center;
			margin-left: 30rpx;
		}
	}

</style>
